<template>
  <view>
    <view class="shop_list_box">
      <view class="shops_box_item_new" v-for="(shops,index) in shopDataList" :key="index" >
<!--        商家标题-->
        <view class="shop_top" >
          <view>
            <image :src="BestImgUrlBwc + '/image/shop.png'" style="height: 38rpx;width: 38rpx"></image>
          </view>
          <view class="text">
            {{ shops.shopInfo.name }}
          </view>
          <view style="color: #888888;font-size: 24rpx">
            距离{{ toFixedOne(shops.packageList[0].distance/1000) }}km
          </view>
        </view>
        <u-line color="#EEEEEE" hair-line margin="20rpx 0"></u-line>
        <!-- 商家列表内容 -->
        <view class="package_box"
          :style="{height: shops.isShowBtn ? (shops.packageList.length>1 ? shops.shopsBoxHeight*2 + 'px' : shops.shopsBoxHeight + 'px') : (shops.packageList.length>1 ? shopsBoxHeight*2-10 + 'px' : shopsBoxHeight + 'px') }" >
          <view v-for="(packageItem,packageIndex) in shops.packageList" :key="packageIndex" >
            <transition name="expand">
              <view @click="OpenDetails(packageItem,index)" class="shops_box_item u-flex">
                <view class="left_goods">
                  <view style="position: relative">
                    <view v-if="(packageItem.stock - packageItem.daily_sales_num) <=0"
                          class="goods_tu" style="background-color: #00000090;position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;">
                      <image class="goods_tu1" :src="BestImgUrlBwc + 'home/ysq.png'"></image>
                    </view>
                    <view v-if="shops.shopInfo.is_chain" class="chain">连锁</view>
                    <view v-if="shops.shopInfo.is_preferred" class="preferred">优选</view>
                    <image class="goods_tu" :src="baseUrl + packageItem.logo"></image>
                  </view>
                  <view class="jdt u-flex">
                    <view class="jft_box">
                      <u-line-progress :isHuo="true" :isicon="BestImgUrl + '/index/Group-34813.png'" active-color="#FA682C"
                                       inactive-color="#FFF1E3" height="18" :show-percent="false" :striped="true"
                                       :percent="((packageItem.stock - packageItem.daily_sales_num)/packageItem.stock)*100" :striped-active="true">
                      </u-line-progress>
                    </view>
                    <text class="synum">剩{{ (packageItem.stock - packageItem.daily_sales_num) <=0 ? 0 : (packageItem.stock - packageItem.daily_sales_num) }}份</text>
                  </view>
                </view>
                <view class="right_goods_info">
                  <view class="shop_name">{{ packageItem.name }}</view>
                  <view v-if="packageItem.platform_type === 0" class="shop_addres u-flex" style="height: 48rpx;line-height: 48rpx;color: #9C9C9C">
                    <view class="shop_require ellipsis-one-line">{{"探店要求：小红书粉丝数≥" + packageItem.fans_num + "大众点评等级≥" + packageItem.level}}</view>
                    <!--<u-icon name="arrow-right" style="margin-left: 10rpx;height: 16rpx;width: 16rpx;margin-top: 2rpx"></u-icon>-->
                  </view>
                  <view v-else  class="shop_addres u-flex" style="height: 48rpx;line-height: 48rpx;color: #9C9C9C">
                    <view class="shop_require ellipsis-one-line">{{ packageItem.platform_type === 3 ? "探店要求：大众点评等级≥" + packageItem.level : "探店要求：小红书粉丝数≥" + packageItem.fans_num }}</view>
                    <!--<u-icon name="arrow-right" style="margin-left: 10rpx;height: 16rpx;width: 16rpx;margin-top: 2rpx"></u-icon>-->
                  </view>

                  <view style="width: 460rpx;;height:126rpx;position: relative;z-index: 2">
                    <image :src="BestImgUrlBwc + 'home/order_price.png'"
                           style="width: 460rpx;height: 126rpx;top: 0;right: 0;position: absolute"></image>
                    <view style="position: relative;text-align: center;padding-top: 10rpx;color: white;font-size: 24rpx">
                      <view>￥{{ toFixedTwo(packageItem.rebate_amount) }}</view>
                      <view>返利</view>
                    </view>
                    <view style="display: flex">
                      <view style="color: #FF9746;margin-top: -16rpx;font-size: 22rpx">
                        原价￥{{ packageItem.price }}
                      </view>
                      <view style="flex: 1"></view>
                      <view style="color: #FF9746;margin-top: -16rpx;font-size: 22rpx">
                        原价￥{{ packageItem.price }}
                      </view>
                    </view>
                  </view>
                  <view
                      style="width: 460rpx;margin-top:-15rpx;position: relative;height: 80rpx;border-radius:66rpx;z-index: 1"
                      :style="{ 'background-color': (packageItem.stock - packageItem.daily_sales_num) <=0 ? '#f2f2f2' : '#FFF0E5' }">
                    <view style="width: 460rpx;position: absolute;">
                      <image v-if="(packageItem.stock - packageItem.daily_sales_num) > 0" :src="BestImgUrlBwc + 'home/order_qd.png'"
                             style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>
                      <image v-else :src="BestImgUrlBwc + 'home/order_sq.png'"
                             style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>
                      <!--               <image :src="BestImgUrlBwc + 'home/order_yy.png'" style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>-->
                      <!--               <image :src="BestImgUrlBwc + 'home/order_yyy.png'" style="width: 202rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>-->
                    </view>
                    <view
                        style="position: relative;z-index: 3;margin-left: 30rpx;height: 80rpx;line-height: 80rpx;font-size: 26rpx"
                        :style="{ 'color': (packageItem.stock - packageItem.daily_sales_num) <= 0 ? '#c9c9c9' : '#FF5F15' }">
                      探店价:￥
                      <text style="font-size: 39rpx">{{ toFixedTwo(packageItem.price - packageItem.rebate_amount) }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </transition>
            <view v-if="shops.packageList.length > 1" class="package_line">
              <u-line v-if="packageIndex === 0" color="#EEEEEE" hair-line></u-line>
              <u-line v-if="packageIndex === 1 && shops.isShowBtn" color="#EEEEEE" hair-line></u-line>
              <u-line v-if="packageIndex > 1" color="#EEEEEE" hair-line></u-line>
            </view>

          </view>
        </view>

        <view v-if="shops.packageList.length > 2" @click="collapseFun(shops.shopInfo.id)" class="collapse">
          <view v-if="!shops.isShowBtn" class="collapse-item">共有{{shops.packageList.length}}个套餐，<text style="color: #888888">展开更多</text><u-icon name="arrow-down" size="30" color="#888888"></u-icon></view>
          <view v-if="shops.isShowBtn" class="collapse-item">点击收起<u-icon name="arrow-up" size="30" color="#888888"></u-icon></view>

        </view>
      </view>
    </view>
    <!--笔记要求弹窗-->
    <u-popup v-model="showAsk" mode="bottom" width="750" border-radius="20" :closeable="true"
             :mask-close-able="true">
      <view style="padding: 30rpx;background: white" v-if="order_item">
        <view class="guanyu_title">笔记要求</view>

        <view style="height: 20rpx"></view>
        <u-line></u-line>
        <view style="height: 20rpx"></view>
        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">在到店体验完成后，按照以下要求发布一篇笔记即可获得
            <text style="color:#FF7800;">{{ order_item.rebate_amount }}</text>
            元现金~
          </view>
          <view
              style="font-size: 26rpx;margin-top: 20rpx;color: #FF7800;background-color: #FFF8E8;padding: 20rpx;border-radius: 20rpx">
            Tips:图片是重点!可参考领食周边购实拍和探友晒图哦~
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;;font-weight: bold">笔记平台:
            <text v-if="order_item.platform_type==1">小红书笔记</text>
            <text v-if="order_item.platform_type==2">抖音笔记</text>
            <text v-if="order_item.platform_type==3">大众点评笔记</text>
            <text v-if="order_item.platform_type==4">美团笔记</text>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">笔记图片</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #666666"> {{ order_item.activity_ask }}</view>
          <view style="font-size: 26rpx;margin-top: 20rpx;">
            <view style="font-weight: bold">携带话题</view>
            <view style="height: 10rpx"></view>
            <text style="color: #FF7800">{{ order_item.package.subject }}</text>
            <text style="height: 10rpx;color: #666666">+2个热门自选话题</text>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">添加门店定位</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #FF7800" @click="Daohang()">{{
              order_item.shop.address
            }}
          </view>
        </view>

        <view style="height: 60rpx"></view>
        <view style="width: 690rpx;height: 80rpx;background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
              font-size: 32rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;border-radius: 60rpx"
              @click="showAsk=false">
          确定
        </view>
        <view style="height: 20rpx"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
export default {
  name: "shops-list",
  props: {
    shopList: {
      type: Array,
      default: []
    },
    isShop: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      BestImgUrlBwc: app.globalData.imgurlBwc,
      baseUrl: app.globalData.baseUrl,
      shopDataList: this.shopList,// 套餐列表
      showAsk: false,
      isPackageClose: false, //是否展开其余的套餐
      shopsBoxHeight: '',//单个套餐高度
      animationData: {}, //动画结果集
    }
  },

  methods: {
    toFixedOne(val) {
      return Number(val).toFixed(1);
    },
    toFixedTwo(val) {
      return Number(val).toFixed(2);
    },

    // 展开和折叠事件
    collapseFun(id){
      // console.log('店铺ID==', id)
      this.shopDataList = this.shopDataList.map(item => {
        if (item.shopInfo.id === id){
          return {...item, shopsBoxHeight: item.isShowBtn ? this.shopsBoxHeight : 'auto', isShowBtn: !item.isShowBtn}
        }
        return item;
      })
      console.log('shopList==', this.shopDataList)

    },
    //套餐已售完
    OpenDetails(item, index) {
      console.log('订单详情==', item)
      if((item.stock - item.daily_sales_num) <=0){
        uni.showToast({
          title: '该套餐已售完',
          icon: 'none',
          duration: 2000
        })
        return
      }
      uni.navigateTo({
        url: '/subpackageA/pages/PackageDetails/PackageDetails?package_id=' + item.id
      })
    },
    //探店要求弹窗
    shopRequire(res){
      this.showAsk = true;
    }
  },
  mounted() {
    let that = this;
    that.$nextTick(() => {
      that.shopDataList.forEach(item => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.shops_box_item').boundingClientRect(data => {
          if (data) {
            that.shopsBoxHeight = data.height + 20
            item.shopsBoxHeight = data.height + 20
            console.log('单个套餐高度:', that.shopsBoxHeight);
          }
        }).exec();
      })
      // console.log('套餐高度:', that.shopDataList)
    })

  },
  watch: {
    shopList: function (val) {
      this.shopDataList = val
    }
  },

}
</script>

<style lang="scss">
.expand-enter-active, .expand-leave-active {
  transition: max-height 2s ease; /* 控制动画时间和方式 */
}
.expand-enter, .expand-leave-to /* .expand-leave-active 在 <2.1.8 版本中使用 */ {
  max-height: 0; /* 开始和结束时的高度 */
}
.shops_box_item_new {
  background-color: #ffffff;
  padding: 20rpx 20rpx 0;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  //box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.05);
}

.shop_top {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;

  .text {
    margin-left: 10rpx;
    margin-bottom: 3rpx;
    flex: 1;
    font-size: 28rpx;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.shop_list_box {
  position: relative;
  z-index: 2;
  /* 商家列表内容css */
  .package_box {
    overflow: hidden;
    // 横线css
    .package_line{
      margin: 20rpx 0;
    }
  }
  .active_package_box{
    height: 156rpx;
    transition: all .3s;
    margin-bottom: 20rpx;
    overflow: hidden;
  }
  .shops_box_item {
    align-items: flex-start;

    .left_goods {
      width: 184rpx;
      .chain{
        width: 72rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        background: linear-gradient( 270deg, #FE8707 0%, #FD3F03 100%);
        border-radius: 8rpx;
      }
      .preferred{
        width: 72rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #994A00;
        text-align: center;
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        background: linear-gradient( 270deg, #FABD65 0%, #FFD495 100%);
        border-radius: 8rpx;
      }
      .goods_tu {
        width: 184rpx;
        height: 184rpx;
        border-radius: 16rpx;
      }

      .goods_tu1 {
        width: 98rpx;
        height: 98rpx;
        border-radius: 16rpx;
      }

      .jdt {
        margin-top: 18rpx;
        position: relative;
        align-items: center;

        .jft_box {
          flex: 1;
        }

        .synum {
          margin-left: 10rpx;
          font-size: 18rpx;
          color: #FF4E0D;
        }
      }
    }

    .right_goods_info {
      padding: 0 0 0 20rpx;
      flex: 1;

      .shop_name {
        font-weight: bold;
        color: $zzy-text-color-333333;
        font-size: 32rpx;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .shop_addres {
        align-items: center;
        font-size: 24rpx;
        color: $zzy-text-color-666666;
        margin-bottom: 8rpx;
        display: flex;
        justify-content: space-between;
        image {
          width: 26rpx;
          height: 26rpx;
        }

        .dz {
          flex: 1;
          -webkit-line-clamp: 1;
        }

        .mi {

        }
      }

      .tags_box {
        align-items: center;
        margin-bottom: 0;
      }

      .qiang_Btn {
        position: relative;
        background-color: #FFF1E3;
        align-items: center;
        justify-content: space-between;
        border-radius: 20rpx;
        height: 84rpx;
        margin-top: 40rpx;

        .yj {
          position: absolute;
          top: -14rpx;
          left: 20rpx;
          font-size: 20rpx;
          border: 1px solid #FFDCB8;
          border-radius: 200rpx 200rpx 200rpx 0;
          background-color: #ffffff;
          padding: 0 10rpx;
          color: #FF4E0D;
        }

        .price {
          padding: 0 0 0 20rpx;
          color: #FF4E0D;

          text:nth-child(1) {
            font-size: 24rpx;
          }

          text:nth-child(2) {
            font-size: 36rpx;
            margin: 0 4rpx;
            font-weight: bold;
          }

          text:nth-child(3) {
            font-size: 24rpx;
          }
        }

        .qbtn {
          position: relative;
          width: 220rpx;
          height: 84rpx;
          border-radius: 24rpx;
          display: flex;
          align-items: center;

          .btn_bg_color {
            background-color: #FF4E0D;
            width: 150rpx;
            height: 84rpx;
            margin-left: auto;
            border-radius: 0 24rpx 24rpx 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 26rpx;

            .qiangzi {
              width: 39.78rpx;
              height: 45.18rpx;
            }
          }

          .qbtn_wrap_box {
            position: absolute;
            top: -30rpx;
            z-index: 9;

            .qbtn_wrap {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;

              .fanli {
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                color: #51220F;
                text-align: center;

                view:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: bold;

                  span {
                    font-size: 24rpx;
                  }
                }

                view:nth-child(2) {
                  font-size: 24rpx;
                }
              }

              image {
                width: 74px;
                height: 114rpx;
              }
            }
          }
        }
      }
    }
  }
  .collapse{
    height: 80rpx;
    line-height: 80rpx;
    margin-top: -20rpx;
    text-align: center;
    .collapse-item{
      font-size: 24rpx;
      color: #3D3D3D;
    }
  }
}
/* 案例 */


</style>